<template>
  <div class="sharedetail">
    <MyNavbar title="面试经验" path="-1"></MyNavbar>
    <div class="content">
      <h3>{{ list.title }}</h3>
      <div class="user">
        <img class="imgs" :src="list.author.avatar | formatImg" alt="" />
        <div class="font">{{ list.author.nickname }}</div>
        <div class="fonts">{{ list.created_at | formatData2 }}</div>
      </div>
      <p class="txt" v-html="list.content"></p>
    </div>
    <div class="say">
      <div class="titlesay">
        评论
        <span class="total">{{ saytotal }}</span>
      </div>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getSay"
      >
        <div class="contents" v-for="(item, index) in say" :key="index">
          <div class="users">
            <img
              class="imgs"
              :src="item.author.avatar | formatImg"
              v-imgerror="avatar"
              alt=""
            />
            <div class="font">
              {{ item.author.nickname || item.author }}
              <div class="iconfont iconbtn_dianzan_small_nor saygood"></div>
            </div>
            <div class="fonts">{{ item.created_at | formatData2 }}</div>
          </div>
          <div class="comments">
            <div class="buttom">
              <p>{{ item.content }}</p>
            </div>
            <div
              class="othercomments"
              v-for="(i, index) in item.children_comments"
              :key="index"
            >
              <p class="saycontent">{{ i.author }}:{{ i.content }}</p>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 写评论 -->
    <van-popup position="bottom" v-model="showSend">
      <van-nav-bar title="发表评论">
        <template #right>
          <div style="color: #f40" @click="send">发表</div>
        </template>
      </van-nav-bar>
      <van-field
        v-model="text"
        rows="5"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="请输入评论"
      ></van-field>
    </van-popup>
    <!-- 底部功能 -->
    <van-tabbar>
      <van-tabbar-item>
        <van-field
          @click="inputClick"
          class="input"
          placeholder="我来补充两句..."
        />
      </van-tabbar-item>
      <van-tabbar-item class="iconfont iconbtn_shoucang_nor"
        ><div class="name">收藏</div></van-tabbar-item
      >
      <van-tabbar-item
        :class="good === 1 ? 'actived' : ''"
        class="iconfont iconbtn_dianzan_small_nor"
        @click="clickGood()"
        ><div class="name">点赞</div></van-tabbar-item
      >
      <van-tabbar-item class="iconfont iconbtn_share"
        ><div class="name" @click="isShow()">转发</div></van-tabbar-item
      >
    </van-tabbar>
    <van-dialog v-model="show" title="标题" show-cancel-button>
      <div>0.0</div>
    </van-dialog>
  </div>
</template>

<script>
import {
  articlesShareId,
  articlesStar,
  articlesCommentsId,
  articlesComments
} from '@/api/find.js'

export default {
  data () {
    return {
      avatar: require('@/assets/common/avatar.png'),
      text: '',
      showSend: false,
      loading: false,
      finished: false,
      list: [],
      saytotal: 0,
      say: [],
      id: this.$route.query.id,
      form: {
        id: this.$route.query.id,
        limit: 4,
        start: 0
      },
      good: '',
      show: false
    }
  },

  created () {
    this.getData()
    this.getSay()
  },
  mounted () {
    this.getSay()
  },
  methods: {
    async getData () {
      const res = await articlesShareId(this.id)
      this.list = res.data
      console.log(this.list)
    },
    async clickGood () {
      const good = await articlesStar({
        article: this.id
      })
      // console.log(good)
      this.good = good.data.num
    },
    async getSay () {
      // console.log(this.form)
      const rest = await articlesCommentsId(this.form)
      this.loading = false
      this.say.push(...rest.data.list)
      // console.log(this.say)
      this.saytotal = rest.data.total
      if (this.saytotal > this.say.length) {
        this.form.start = this.form.limit + this.form.start
      } else {
        this.finished = true
      }
      // console.log(this.say)
      this.$toast.loading({ message: '加载中' })
      this.$nextTick(() => {
        this.$toast.clear()
      })
    },
    inputClick () {
      this.showSend = true
    },
    isShow () {
      this.show = true
    },
    async send () {
      const res = await articlesComments({
        content: this.text,
        article: this.$route.query.id,
        parent: this.$route.query.id
      })
      this.say.unshift(res.data)
      // console.log(res)
      // console.log(this.say)
      this.showSend = false
      this.text = ''
      this.saytotal++
    }
  }
}
</script>

<style lang="less" scoped>
.sharedetail {
  padding-bottom: 100px;
  width: 100%;
  .input {
    background-color: #f7f4f5;
    font-size: 24px;
    padding: 15px;
    margin-left: 30px;
  }
  .iconfont {
    font-size: 48px;
    .name {
      font-size: 28px;
    }
  }
  .actived {
    color: red;
  }
  .content {
    margin-bottom: 100px;
    .txt {
      padding-left: 20px;
      padding-right: 30px;
    }
    h3 {
      font-weight: normal;
      padding-left: 18px;
      padding-top: 18px;
      padding-bottom: px;
    }
    .user {
      display: flex;
      position: relative;
      margin-bottom: 70px;
      margin-top: 20px;
      margin-left: 20px;
      .imgs {
        width: 100px;
        height: 100px;
        border-radius: 75%;
      }
      .font {
        position: absolute;
        top: 15px;
        left: 120px;
        font-weight: 700;
        font-size: 24px;
      }
      .fonts {
        position: absolute;
        top: 60px;
        left: 120px;
        font-size: 12px;
        color: #b4b4bd;
      }
    }
    .users {
      display: flex;
      position: relative;
      margin-bottom: 20px;
      margin-top: 20px;
      margin-left: 20px;
      .imgs {
        width: 100px;
        height: 100px;
        border-radius: 75%;
      }
      .font {
        position: absolute;
        top: 15px;
        left: 120px;
        font-weight: 700;
        font-size: 24px;
        .saygood {
          position: absolute;
          top: 10px;
          left: 500px;
          font-weight: 200;
        }
      }
      .fonts {
        position: absolute;
        top: 60px;
        left: 120px;
        font-size: 12px;
        color: #b4b4bd;
      }
    }

    .comments {
      margin-left: 140px;
      font-size: 38px;
      font-weight: 200;
      width: 280px;

      .othercomments {
        margin-top: 20px;
        width: 550px;
        font-weight: 500;
        background-color: #f7f4f5;
        font-size: 28px;
        color: #545671;
        text-indent: 4%;
        .saycontent {
          padding: 20px;
        }
      }
    }
  }
  .say {
    .contents {
      margin-bottom: 50px;
      width: 100%;
      .txt {
        padding-left: 20px;
        padding-right: 30px;
      }
      h3 {
        font-weight: normal;
        padding-left: 18px;
        padding-top: 18px;
      }
      .users {
        display: flex;
        margin-bottom: 70px;
        margin-top: 20px;
        margin-left: 20px;
        .imgs {
          width: 100px;
          height: 100px;
          border-radius: 75%;
        }
        .font {
          position: absolute;
          top: 15px;
          left: 120px;
          font-weight: 700;
          font-size: 24px;
        }
        .fonts {
          position: absolute;
          top: 60px;
          left: 120px;
          font-size: 12px;
          color: #b4b4bd;
        }
      }
      .users {
        display: flex;
        position: relative;
        margin-bottom: 20px;
        margin-top: 20px;
        margin-left: 20px;
        .imgs {
          width: 100px;
          height: 100px;
          border-radius: 75%;
        }
        .font {
          position: absolute;
          top: 15px;
          left: 120px;
          font-weight: 700;
          font-size: 24px;
          .saygood {
            position: absolute;
            top: 10px;
            left: 500px;
            font-weight: 200;
          }
        }
        .fonts {
          position: absolute;
          top: 60px;
          left: 120px;
          font-size: 12px;
          color: #b4b4bd;
        }
      }

      .comments {
        font-size: 38px;
        font-weight: 200;
        width: 700px;
        .buttom {
          margin-left: 140px;
          margin-bottom: 10px;
          width: 550px;
          font-size: 34px;
          overflow: hidden;
        }
        .othercomments {
          margin-left: 140px;
          width: 550px;
          font-weight: 500;
          background-color: #f7f4f5;
          font-size: 28px;
          color: #545671;
          text-indent: 4%;
          overflow: hidden;

          .saycontent {
            padding: 10px 0px 10px 10px;
          }
        }
      }
    }
    .titlesay {
      position: relative;
      padding-left: 22px;
      font-size: 36px;
    }
    .total {
      font-size: 16px;
      position: absolute;
      top: 0;
      left: 100px;
      color: #b4b4bd;
    }
  }
}
.setWidth {
  width: 100%;
}
</style>
